{% extends "admin/base_site.html" %}
{% load i18n %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Tables{% endblock %}

{% block extrahead %}
	<script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("#grp-content-container .grp-group").grp_collapsible_group();
                $("#grp-content-container .grp-collapse").grp_collapsible({
                    on_init: function(elem, options) {
                        // open collapse (and all collapse parents) in case of errors
                        if (elem.find("ul.errorlist").length > 0) {
                            elem.removeClass("grp-closed")
                                .addClass("grp-open");
                            elem.parents(".grp-collapse")
                                .removeClass("grp-closed")
                                .addClass("grp-open");
                        }
                    }
                });
            });
        })(django.jQuery);
	</script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Tables</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Tables</h1>
    <div class="g-d-c">
    	<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Basic Tables</h1>
		            <p>Feel free to use everything a table structure allows.</p>
		            <p>To cycle the background-color of <span class="grp-doc-dom"><span>tr</span></span> use the classes <span class="grp-doc-class">.grp-row-even</span> and <span class="grp-doc-class">.grp-row-odd</span>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<table>
	    				<thead>
	    					<tr>
	    						<th>Prename</th>
	    						<th>Surname</th>
	    						<th>Instrument</th>
	    					</tr>
	    				</thead>
	    				<tfoot>
	    					<tr class="grp-row-even">
	    						<td>Prename</td>
	    						<td>Surname</td>
	    						<td>Instrument</td>
	    					</tr>
	    				</tfoot>
	    				<tbody>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stéphane</a></th>
	    						<td>Grappelli</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Django</a></th>
	    						<td>Reinhardt</td>
	    						<td>Guitar</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Eddie</a></th>
	    						<td>South</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Joe</a></td>
	    						<td>Venuti</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stuff</a></th>
	    						<td>Smith</td>
	    						<td>Violin</td>
	    					</tr>
	    				</tbody>
	    			</table>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<table>
    <thead>
        <tr>
            <th>Prename</th>
            <th>Surname</th>
            <th>Instrument</th>
        </tr>
    </thead>
    <tfoot>
        <tr class="grp-row-even">
            <td>Prename</td>
            <td>Surname</td>
            <td>Instrument</td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="grp-row-even">
            <th><a href="#">Stéphane</a></th>
            <td>Grappelli</td>
            <td>Violin</td>
        </tr>
        <tr class="grp-row-odd">
            <th><a href="#">Django</a></th>
            <td>Reinhardt</td>
            <td>Guitar</td>
        </tr>
        <tr class="grp-row-even">
            <th><a href="#">Eddie</a></th>
            <td>South</td>
            <td>Violin</td>
        </tr>
        <tr class="grp-row-odd">
            <th><a href="#">Joe</a></td>
            <td>Venuti</td>
            <td>Violin</td>
        </tr>
        <tr class="grp-row-even">
            <th><a href="#">Stuff</a></th>
            <td>Smith</td>
            <td>Violin</td>
        </tr>
    </tbody>
</table>
{% endfilter %}</code></pre></div>
	    	</div>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h2>Make a Table Span the Full Width</h2>
		            <p>Just add <span class="grp-doc-class">.grp-full-width</span>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<table class="grp-full-width">
	    				<thead>
	    					<tr>
	    						<th>Prename</th>
	    						<th>Surname</th>
	    						<th>Instrument</th>
	    					</tr>
	    				</thead>
	    				<tfoot>
	    					<tr class="grp-row-even">
	    						<td>Prename</td>
	    						<td>Surname</td>
	    						<td>Instrument</td>
	    					</tr>
	    				</tfoot>
	    				<tbody>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stéphane</a></th>
	    						<td>Grappelli</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Django</a></th>
	    						<td>Reinhardt</td>
	    						<td>Guitar</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Eddie</a></th>
	    						<td>South</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Joe</a></td>
	    						<td>Venuti</td>
	    						<td>Violin</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stuff</a></th>
	    						<td>Smith</td>
	    						<td>Violin</td>
	    					</tr>
	    				</tbody>
	    			</table>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<table class="grp-full-width">
    ...
</table>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Sortable Tables</h1>
		            <p>Tables may be sortable (e.g. in <a href="{% url grp_doc_change_list %}">change-lists</a>) - to do so just add the class <span class="grp-doc-class">.grp-sortable</span> to the table.</p>
		            <p>To define a <span class="grp-doc-dom"><span>th</span></span> as a sortable one you have to add  <span class="grp-doc-class">.sortable</span>. If it's already sorted you further have to add <span class="grp-doc-class">.sorted.ascending</span> or <span class="grp-doc-class">.sorted.descending</span>.</p>
		            <p>Each <span class="grp-doc-dom"><span>th</span></span> in a sortable table has to contain the one or more of the following elements:</p>
		            <ul>
		            	<li>A <span class="grp-doc-dom"><span>div.grp-text</span></span> containing an <span class="grp-doc-dom"><span>a</span></span> with the title if the <span class="grp-doc-dom"><span>th</span></span> is sortable and a <span class="grp-doc-dom"><span>span</span></span> if it's not. </li>
		            	<li>If it is already sorted a <span class="grp-doc-dom"><span>div.grp-sortoptions</span></span> containing the following elements:
		            		<ul>
		            			<li>An <span class="grp-doc-dom"><span>a.grp-sortremove</span></span> to remove the sorting</li>
				            	<li>A <span class="grp-doc-dom"><span>span.grp-sortpriority</span></span> showing the priority if more than one <span class="grp-doc-dom"><span>th</span></span> is sorted</li>
				            	<li>A <span class="grp-doc-dom"><span>a.grp-toggle</span></span> with the additional class <span class="grp-doc-class">.grp-ascending</span> or <span class="grp-doc-class">.grp-descending</span> that shows the sorting direction</li>
				            </ul>
		            	</li>
		            </ul>
		            <p>To view the full code of a sortable table take a look at Grappellis change_list_results.html.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<table class="grp-sortable grp-full-width">
	    				<thead>
	    					<tr>
	    						<th class="sortable sorted ascending">
	    							<div class="grp-sortoptions">
	    								<a href="#" class="grp-sortremove"></a>
                                        <span class="grp-sortpriority">2</span>
                                        <a href="#" class="grp-toggle grp-ascending"></a>
	    							</div>
	    							<div class="grp-text"><a href="#">Prename</a></div>
	    						</th>
	    						<th>
	    							<div class="grp-text"><span>Surname</span></div>
	    						</th>
	    						<th class="sortable sorted descending">
	    							<div class="grp-sortoptions">
	    								<a href="#" class="grp-sortremove"></a>
                                        <span class="grp-sortpriority">1</span>
                                        <a href="#" class="grp-toggle grp-descending"></a>
	    							</div>
	    							<div class="grp-text"><a href="#">Instrument</a></div>
	    						</th>
	    						<th class="sortable">
	    							<div class="grp-text"><a href="#">Ranking</a></div>
	    						</th>
	    					</tr>
	    				</thead>
	    				<tbody>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stuff</a></th>
	    						<td>Smith</td>
	    						<td>Violin</td>
	    						<td>5</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Stéphane</a></th>
	    						<td>Grappelli</td>
	    						<td>Violin</td>
	    						<td>1</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Joe</a></td>
	    						<td>Venuti</td>
	    						<td>Violin</td>
	    						<td>3</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Eddie</a></th>
	    						<td>South</td>
	    						<td>Violin</td>
	    						<td>4</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Django</a></th>
	    						<td>Reinhardt</td>
	    						<td>Guitar</td>
	    						<td>2</td>
	    					</tr>
	    				</tbody>
	    			</table>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<table class="grp-sortable grp-full-width">
    <thead>
        <tr>
            <th class="sortable sorted ascending">
                <div class="grp-sortoptions">
                    <a href="#" class="grp-sortremove"></a>
                    <span class="grp-sortpriority">2</span>
                    <a href="#" class="grp-toggle grp-ascending"></a>
                </div>
                <div class="grp-text"><a href="#">Prename</a></div>
            </th>
            <th>
                <div class="grp-text"><span>Surname</span></div>
            </th>
            <th class="sortable sorted descending">
                <div class="grp-sortoptions">
                    <a href="#" class="grp-sortremove"></a>
                    <span class="grp-sortpriority">1</span>
                    <a href="#" class="grp-toggle grp-descending"></a>
                </div>
                <div class="grp-text"><a href="#">Instrument</a></div>
            </th>
            <th class="sortable">
                <div class="grp-text"><a href="#">Ranking</a></div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="grp-row-even">
            <th><a href="#">Stuff</a></th>
            <td>Smith</td>
            <td>Violin</td>
            <td>5</td>
        </tr>
        .
        .
        .
    </tbody>
</table>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Form Fields &amp; Errors in Tables</h1>
		            <p>You may use all types of <a href="{% url grp_doc_form_fields %}">form fields</a> in tables. As they might throw some errors you can use the common elements for displaying <a href="{% url grp_doc_errors %}">errors</a>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<p class="errornote">Non-form error with some instruments</p>
	    			<table class="grp-full-width">
	    				<thead>
	    					<tr>
	    						<th>Prename</th>
	    						<th>Surname</th>
	    						<th>Instrument</th>
	    						<th>Action</th>
	    					</tr>
	    				</thead>
	    				<tbody>
	    					<tr class="grp-errors">
	    						<td colspan="4"><ul class="errorlist"><li>Non-field error with Stuffs Violin</li></ul></td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Stuff</a></th>
	    						<td>Smith</td>
	    						<td>Violin</td>
	    						<td>
	    							<ul class="errorlist">
	    								<li>Field error: Tuning failed</li>
	    							</ul>
	    							<select>
	    								<option>Tune it ...</option>
	    								<option selected="selected">... up</option>
	    								<option>... down</option>
	    							</select>
	    							<ul class="errorlist">
	    								<li>Field error: Not able to tune it up</li>
	    							</ul>
	    						</td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Stéphane</a></th>
	    						<td>Grappelli</td>
	    						<td>Violin</td>
	    						<td>
	    							<select>
	    								<option>Tune it ...</option>
	    								<option>... up</option>
	    								<option>... down</option>
	    							</select>
	    						</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Joe</a></td>
	    						<td>Venuti</td>
	    						<td>Violin</td>
	    						<td>
	    							<select>
	    								<option>Tune it ...</option>
	    								<option>... up</option>
	    								<option>... down</option>
	    							</select>
	    						</td>
	    					</tr>
	    					<tr class="grp-errors">
	    						<td colspan="4"><ul class="errorlist"><li>Non-field error with Eddies Violin</li></ul></td>
	    					</tr>
	    					<tr class="grp-row-odd">
	    						<th><a href="#">Eddie</a></th>
	    						<td>South</td>
	    						<td>Violin</td>
	    						<td>
	    							<ul class="errorlist">
	    								<li>Field error: Tuning failed</li>
	    							</ul>
	    							<select>
	    								<option>Tune it ...</option>
	    								<option selected="selected">... up</option>
	    								<option>... down</option>
	    							</select>
	    							<ul class="errorlist">
	    								<li>Field error: Not able to tune it up</li>
	    							</ul>
	    						</td>
	    					</tr>
	    					<tr class="grp-row-even">
	    						<th><a href="#">Django</a></th>
	    						<td>Reinhardt</td>
	    						<td>Guitar</td>
	    						<td>
	    							<select>
	    								<option>Tune it ...</option>
	    								<option>... up</option>
	    								<option>... down</option>
	    							</select>
	    						</td>
	    					</tr>
	    				</tbody>
	    			</table>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<table class="grp-full-width">
    <thead>
        <tr>
            <th>Prename</th>
            <th>Surname</th>
            <th>Instrument</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="grp-errors">
            <td colspan="4"><ul class="errorlist"><li>Non-field error with Stuffs Violin</li></ul></td>
        </tr>
        <tr class="grp-row-even">
            <th><a href="#">Stuff</a></th>
            <td>Smith</td>
            <td>Violin</td>
            <td>
                <ul class="errorlist">
                    <li>Field error: Tuning failed</li>
                </ul>
                <select>
                    <option>Tune it ...</option>
                    <option selected="selected">... up</option>
                    <option>... down</option>
                </select>
                <ul class="errorlist">
                    <li>Field error: Not able to tune it up</li>
                </ul>
            </td>
        </tr>
        .
        .
        .
    </tbody>
</table>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
    </div>
{% endblock %}